/** *人气牛人列表 */
<template>
	<div>
		<!--{{dataList}}-->
		<!--{{mes}}-->
		<gj-loadmore :bottom-method="loadBottom" :bottomPullText="bottomPullText" ref="loadmore">

		<div class="wrapper-xs bg-white"></div>
			<div class="cattle-person-table">
				<div class="hbox cattle-person-table-box popularity-box" v-for="(item,index) in dataList" @click.stop="clickBox(item)">
					<div class="col head-icon v-middle skip">
						<!--<img v-bind:src="item.USER_HEAD!=''? item.USER_HEAD : '../../assets/images/tou1@2x.png'">-->
						<img src="../../assets/images/tou1@2x.png" alt="" v-show="item.USER_HEAD==''" />
						<img v-bind:src="item.USER_HEAD" v-show="item.USER_HEAD!=''">
					</div>
					<div class="col v-middle w-full skip">
						<div class="color-56">
							{{item.NICKNAME}}
						</div>
						<div class="color-9 text-sm">

						</div>
					</div>
					<div class="col v-middle text-right col-x-1 skip">
						<div class="color-blue text-md subscribe-user-count">
							{{item.SUBSCRIBE_USER_COUNT}}
						</div>
						<div class="color-9 text-sm">人订阅</div>
					</div>
					<div class="col v-middle text-center col-x-2 subscribe" @click.stop="subscribe(item,index)">
						<div class="cattle-person-circle-btn">
							<i class="iconfont " :class="{'icon-x':item.SUBSCRIBE_FLAG==1,'icon-dingyue':item.SUBSCRIBE_FLAG==0}"></i>
						</div>
						<span class="color-9 text-xs" v-text="item.SUBSCRIBE_FLAG==1?'取消订阅':'订阅'"></span>

					</div>
				</div>
			</div>
		</gj-loadmore>
		<subscribe-cancel-modal></subscribe-cancel-modal>
		<subscribe-modal></subscribe-modal>
	</div>

</template>
<script>
	import RemoteDAO from 'common/remoteDAO'
	import LocalDAO from 'common/localDAO'
	import CommonUtil from 'common/common.util'
	import LoadMore from 'components/LoadMore'
	import SubscribeCancelModal from 'components/modal/SubscribeCancelModal'
	import SubscribeModal from 'components/modal/SubscribeModal'
	export default {
		data() {
			return {
				mes: '',
				userCode: '',
				nickName: '',
				pageObj: {
					pageNum: 1,
					pageSize: 10,
				},
				defUserHead: '',
				expandedIndex: '',
				dataList: [],
				subsChecked: {},
				bottomPullText:"向上滑动更多牛人"
			}
		},
		components: {
			'subscribe-cancel-modal': SubscribeCancelModal,
			'subscribe-modal': SubscribeModal,
			'gj-loadmore': LoadMore
		},
		methods: {
			loadBottom() {
				let vm = this;

		        vm.fetchData(function (allLoaded,error) {
		          if(error){
		            vm.$refs.loadmore.onBottomError(error);//单次加载失败或者没有数据，error为报错信息，如果是没有数据，写暂无数据
		          }else if (allLoaded) {
		            vm.$refs.loadmore.onBottomAllLoaded();//全部数据加载完成
		          } else {
		            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
		          }
		        });
			},
			subscribeCancelModal(relationUserCode, callback) {
				//订阅需传递要订阅的用户的userCode 即relationUserCode   callback:回调函数，若Number(response.error) === 0,则操作成功
				this.$store.dispatch('setModal', { visible: true, modalId: 'subscribeCancelModal', relationUserCode: relationUserCode, callback });
			},
			subscribeModal(relationUserCode, callback) {
				//取消需传递订阅的用户的userCode 即relationUserCode;   callback:回调函数，若Number(response.error) === 0,则操作成功
				this.$store.dispatch('setModal', { visible: true, modalId: 'subscribeModal', relationUserCode: relationUserCode, callback });
			},
			//点击整行
			clickBox(item) {
				var vm = this;
				vm.$router.push({ path: '/otherdetail', query: { userCode: item.USER_CODE } })
				var userCode = LocalDAO.getUserCode();
				var kv = { "usercode": userCode, "k2": "" };
				TDAPP.onEvent("15008", "", kv);
				TDAPP.send();

			},
			//获取列表数据
			fetchData(afterFetchData) {
//				alert(vm.pageObj.pageNum)
				var vm = this,
					error,
					allLoaded;

				RemoteDAO.callUC12008301(vm.userCode, "0",vm.pageObj.pageSize,vm.pageObj.pageNum, "", function(resp) {
					vm.mes = resp;
					if(resp.error == "0") {
						var respData = resp.data || {};
						var data=respData.body;
						vm.dataList = vm.dataList.concat(data );

						if(vm.dataList.length == 0){
              				error = '暂无数据'
            			}else if (data.length < vm.pageObj.pageSize){
              				allLoaded = true
            			}

		                if(!allLoaded){
		                	vm.pageObj.pageNum++;
		                };
					} else{
     					error = response.data
  					}

  					afterFetchData(allLoaded, error);
				})
			},
			subscribe(item) {
				var vm = this;
				//				alert(item.SUBSCRIBE_FLAG==0)
				if(!LocalDAO.getNickname()) {
					var kv = { "usercode": "", "k2": "" };
					TDAPP.onEvent("2015", "", kv);
					TDAPP.send();
					//注册或登录
					RemoteDAO.callNativeLogin(function(response) {
						if(response.error == 0) {
              vm.$store.dispatch('setTip',{text: "已为您登录，请重新查看点击"});
              setTimeout(function () {
                window.location.reload(true);
              },1000)
						} else {
              vm.$store.dispatch('setTip',{text:response.data});
						}
					});
				} else {
					var relationUserCode = item.USER_CODE;
					if(item.SUBSCRIBE_FLAG == 1) {
            //取消订阅弹窗
						vm.subscribeCancelModal(relationUserCode, function(response) {
							if(Number(response.error) == 0) {
								item.SUBSCRIBE_FLAG = 0
                item.SUBSCRIBE_USER_COUNT=parseInt(item.SUBSCRIBE_USER_COUNT)-1
							}
						})
            var kv = {"usercode": vm.userCode, "k2": ""};
            TDAPP.onEvent("15018", "", kv);
            TDAPP.send();
					} else {
						//订阅弹窗
						vm.subscribeModal(relationUserCode, function(response) {
							if(Number(response.error) == 0) {
								item.SUBSCRIBE_FLAG = 1
                item.SUBSCRIBE_USER_COUNT=parseInt(item.SUBSCRIBE_USER_COUNT)+1
							}
						})
            var kv = {"usercode": vm.userCode, "k2": ""};
            TDAPP.onEvent("15007", "", kv);
            TDAPP.send();
					}
				}
			}
		},
		created() {
			var vm = this;

			vm.userCode = LocalDAO.getUserCode(); //用户ID
			vm.nickName = LocalDAO.getNickname(); //用户名
//			vm.fetchData();
		}
	}
</script>
